<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        table {
            width: 600px;
            text-align: center;
            border-bottom: solid 2px #DDD;
            /* 合并边框 */
            border-collapse: collapse;
        }
        td,th {
            border-bottom: solid 1px #DDD;
            height: 40px;
        }
    </style>
</head>
<body>
<h3>用户信息</h3>
<table>
    <tr>
        <th>用户编号</th>
        <th>用户姓名</th>
        <th>用户性别</th>
        <th>用户年龄</th>
    </tr>
    <tbody id="userBox">
    <!-- 这里是动态内容 -->
    </tbody>
</table>
<script>
    let userArr = [{
        userId: 1,
        userName: '张三',
        userSex: '男',
        userAge: 20
    }, {
        userId: 2,
        userName: '李四',
        userSex: '女',
        userAge: 21
    }, {
        userId: 3,
        userName: '王五',
        userSex: '男',
        userAge: 22
    }]
    let userBox = document.getElementById('userBox');
    let str = '';
    for (let i = 0; i < userArr.length; i++) {
        str += '<tr>' +
            '<td>' + userArr[i].userId + '</td>' +
            '<td>' + userArr[i].userName + '</td>' +
            '<td>' + userArr[i].userSex + '</td>' +
            '<td>' + userArr[i].userAge + '</td>' +
            '</tr>';
    }
    userBox.innerHTML = str;
</script>
</body>
</html>